<template>
    <div id="pressureDate" class="pressureDate">
		<div class="content_wrap">
			<div class="opt_wrap">
				<!-- 新增、删除、导入、导出 -->
				<!-- <el-button type="primary" icon="el-icon-plus">新增</el-button>
				<el-button type="primary" icon="el-icon-delete">删除</el-button>
				<el-button type="primary" icon="el-icon-upload2">导入</el-button> -->
				<el-button type="primary" icon="el-icon-download" @click="doExport" v-loading.fullscreen.lock="fullscreenLoading">导出</el-button>
			</div>
			<el-table
				:data="tableData"
				style="width: 100%" 
				@selection-change="selectChange">
				<el-table-column
				type="selection"
				width="55" >
				</el-table-column>
				<el-table-column
					label="序号"
					prop="id"
					width="80">
				</el-table-column>
				<el-table-column
					prop="name"
					label="站点名称"
					width="180">
				</el-table-column>
				<el-table-column
					prop="uploadTime"
					label="上传时间">
				</el-table-column>
				<el-table-column
					prop="pressure"
					label="压力（Mpa）">
				</el-table-column>
				<el-table-column
					prop="instantaneousTraffic"
					label="瞬时流量（m³/s）">
				</el-table-column>
				<el-table-column
					prop="todayTraffic"
					label="今日流量（m³/s）">
				</el-table-column>
				<el-table-column
					prop="yesterdayTraffic"
					label="昨日流量（m³/s）">
				</el-table-column>
				<el-table-column
					prop="actualAccumulation"
					label="实际累计（m³/s）">
				</el-table-column>
				<el-table-column
					prop="reverseAccumulation"
					label="反向累计（m³/s）">
				</el-table-column>
				<el-table-column
					prop="batteryVoltage"
					label="电池电压(V)">
				</el-table-column>
    		</el-table>
				<div class="block">
					<el-pagination
					:current-page="pageNum"
					:page-sizes="[10, 20, 50, 100]"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
					</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import PanelWrap from '@/components/PanelWrap'
import {exporYLSJData} from '@/api/index.js'
import { saveAs } from 'file-saver'
export default {
	name:'pressureDate',
	data(){
		return {
			pageSize:10,
			pageNum:0,
			total:0,
			tableData: [],
			fullscreenLoading:false,
			selectIds:[],
		}
	},
	components:{
		PanelWrap
	},
	mounted(){
		this.getTableData();
	},
	methods:{
		getTableData(){
			this.$axios.post('http://43.136.137.111:9898/system/site/pressure/list',{
				pageSize:this.pageSize,
				pageNum:this.pageNum
			}).then(res => {
				this.tableData = res.data.rows; 
				this.total = res.data.total;
			})
		},
		handleSizeChange(val){
			this.pageSize = val;
			this.getTableData();
		},	
		handleCurrentChange(val){
			this.pageNum = val;
			this.getTableData();
		},
		//导出
		doExport(){
			this.fullscreenLoading = true;
			exporYLSJData({ids:this.selectIds}).then(res => {
				let blob = new Blob([res.data])
				const fliName = '压力数据'+new Date().getTime()+ '.xlsx'
				saveAs(blob,fliName)
				this.fullscreenLoading = false;
			}).catch(error => {
				console.log(error)
			})
		},
		//选择		
		selectChange(selection){
            debugger
			let arr = [];
			selection.forEach(element => {
				arr.push(element.id)
			});
			this.selectIds = arr;
		}
	}
}
</script>

<style lang="less" scoped>
.pressureDate{
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #02182d;
		box-sizing: border-box;
		.content_wrap{
			position: relative;
			width: 100%;
			box-sizing: border-box;
			padding: 135px 25px 30px 25px;
            .el-table, .el-table__expanded-cell{
                background-color: transparent;
            }
            .el-table{        
                height:100%;
                .el-table__body-wrapper{
                    position: absolute;
                    z-index: 4;
                }
                tr{
                    height: 56px;
                    background:transparent;
                    color: rgba(255, 255, 255, 0.65);
                    th{
                        color:#ffffff;
                    }
                }
                .el-table th.el-table__cell{
                    background-color: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%);
                }	
                th.el-table__cell{
                    background: rgba(11, 117, 216, 0.1);;
                }
                td.el-table__cell, th.el-table__cell.is-leaf{
                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);;
                }
                .el-button--primary{
                    color: rgba(255, 255, 255, 0.65);
                    background: transparent;
                    border-color: #023557;
                }
                .el-button--primary:hover{
                    border-color: rgba(2, 154, 250, 1);;
                    color: rgba(2, 154, 250, 1);
                }
                .el-checkbox__inner{
                    background: transparent;
                    width: 15px;
                    height: 15px;
                    border: 1px solid rgba(255, 255, 255, 0.5);
                }
                .el-table__body{
                    .hover-row{
                        td{
                            background: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%) !important;
                            color: rgba(2, 154, 250, 1);
                        }
                    }
                }
                .el-table__body tr.current-row>td.el-table__cell{
                    background: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%) !important;
                    color: rgba(2, 154, 250, 1);
                }
            }    
            .el-table::before,.el-table__fixed::before{
                display: none;
            } 
        
            .el-table--enable-row-hover .el-table__body tr:hover > td {
                background: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%) !important;
                        color: rgba(2, 154, 250, 1);
            }
		}
	}
	
</style>